<template>
	<view style="padding-bottom: 160rpx;">
		<view class="content">
			<view class="a1">
				<view class="flex1">
					<view class="item1">
						<span>*</span>活动标题
					</view>
					<view class="item2">
						<u-input placeholder="请输入" border="none" inputAlign="right" v-model='activity.title'></u-input>
					</view>
				</view>

				<view class="flex2">
					<view class="item1">
						<span>*</span>封面图集
						<span class="tips">(第一张为活动封面)</span>
					</view>
					<view class="item2 imageItem">
						<view class="video-item" v-for="item,index in fileList1" :key="index">
							<image src="https://pw.qyang.cc/static/delete.png" class="delete"
								@click="handleDelete(index)">
							</image>
							<image :src="item" class="video"></image>
						</view>
						<view class="btn" @click="chooseImage">
							<image src="https://pw.qyang.cc/static/pic-add.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="a1">
				<view class="flex3">
					<view class="item1">
						<view class="i1">
							预计人数
						</view>
						<view class="i2">
							<view class="set-btn">性别设置</view>
							<switch color="#84E28D" :checked="activity.is_sex==1" style="transform:scale(0.7)"
								@change="setSexChange" />
						</view>
					</view>
					<view v-if="activity.is_sex===0">
						<view class="item3">
							<image src="https://pw.qyang.cc/static/icon-user1.png" mode=""></image>
							<u-input placeholder="请输入人数" border="none" v-model='activity.sex.total'></u-input>
						</view>
					</view>
					<view v-else>
						<view class="item3">
							<image src="https://pw.qyang.cc/static/svg/icon-boy.svg" mode=""></image>
							<u-input placeholder="请输入男生人数" border="none" v-model='activity.sex.male'></u-input>
						</view>
						<view class="item3">
							<image src="https://pw.qyang.cc/static/svg/icon-girl.svg" mode=""></image>
							<u-input placeholder="请输入女生人数" border="none" v-model='activity.sex.female'></u-input>
						</view>
					</view>
				</view>

				<view class="flex4">
					<view class="item1">
						<view class="i1">
							<span>*</span>费用设置（元）
						</view>
						<view class="i2">
							<view class="set-btn">平台代收</view>
							<switch color="#84E28D" :disabled="activity.is_sex===1" :checked="activity.is_collection==1 && activity.is_sex!=1"
								style="transform:scale(0.7)" @change="setDaiChange" />
						</view>
					</view>
					<view v-if="activity.is_sex!==1">
						<view class="item3">
							<image src="https://pw.qyang.cc/static/icon-user1.png" mode=""></image>
							<u-input placeholder="请输入费用" border="none" v-model='activity.price.total'></u-input>
						</view>
					</view>
					<view v-else>
						<view class="item3">
							<image src="https://pw.qyang.cc/static/svg/icon-boy.svg" mode=""></image>
							<u-input placeholder="请输入男生费用" border="none" v-model='activity.price.male'></u-input>
						</view>
						<view class="item3">
							<image src="https://pw.qyang.cc/static/svg/icon-girl.svg" mode=""></image>
							<u-input placeholder="请输入女生费用" border="none" v-model='activity.price.female'></u-input>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="content">
			<view class="a1">
				<view class="flex4">
					<view class="item1">
						<view class="i1">
							<span>*</span>
							活动时间
						</view>
					</view>
					<view class="item" @click="selectTime('time')">
						<view class="event-time">
							<image class="btn-img1" v-if="eventTime=='time'"
								src="https://pw.qyang.cc/static/svg/select1.svg" mode="">
							</image>
							<image class="btn-img1" v-else src="https://pw.qyang.cc/static/svg/select0.svg" mode=""></image>
							定时举办
						</view>
						<view class="time" @click="chooseTime">
							<!-- <u-input placeholder="请选择" border="none" inputAlign="right"
								v-model='selectedTime'></u-input> -->
								
							<view style=" width: 300rpx;text-align: right; color: #C8C8C8;">{{selectedTime==''?'请选择':selectedTime}}</view>
							<u-icon name="arrow-right" size="14" color="#C8C8C8"></u-icon>
						</view>
					</view>
					<view class="item" @click="selectTime('week')">
						<view class="event-time">
							<image class="btn-img1" v-if="eventTime=='week'"
								src="https://pw.qyang.cc/static/svg/select1.svg" mode="">
							</image>
							<image class="btn-img1" v-else src="https://pw.qyang.cc/static/svg/select0.svg" mode=""></image>
							周期举办
						</view>
						<view class="time">
							<u-input placeholder="请输入" border="none" inputAlign="right"
								v-model='issueWeek'></u-input>
						</view>
					</view>

				</view>
			</view>
		</view>
		<u-datetime-picker :show="showTime" v-model="valueTime" mode="datetime" @confirm="confirmTime"
			@cancel="showTime=false"></u-datetime-picker>

		<u-popup :show="showTip" mode="center" @close="showTip=false" @open="openTip" :closeable="true" round="10">
			<view class="pop-bg">
				提示
				<view class="text">
					请设置性别
				</view>
				<view class="btn">
					<view class="confirm" @click="confirmTip()">去设置</view>
				</view>
			</view>
		</u-popup>

		<view class="content">
			<view class="a1">
				<view class="flex4">
					<view class="item1">
						<view class="i1">
							<span>*</span>
							显示期数
						</view>
						<view class="i2">
							<view class="qishu-text">
								<u-number-box v-model="activity.issues">
									<view slot="minus" class="minus">
										<u-icon name="minus" color="#FF7681" size="12"></u-icon>
									</view>
									<text slot="input" class="input">{{activity.issues}}</text>
									<view slot="plus" class="plus">
										<u-icon name="plus" color="#ffffff" size="12"></u-icon>
									</view>
								</u-number-box>
							</view>
						</view>
					</view>
					<view class="num-item">
						显示{{days * activity.issues}}天
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="a1">
				<view class="flex4">
					<view class="item1">
						<view class="i1">
							<span>*</span>
							活动地点
						</view>
						<view class="i2">
							<u-input placeholder="请输入" border="none" inputAlign="right"
								v-model='activity.address'></u-input>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="a1">
				<view class="flex4">
					<view class="item1">
						<view class="i1">
							活动详情
						</view>
						<view class="i2" @click="goDetail">
							<!-- <u-input placeholder="请设置" border="none" inputAlign="right"
								v-model='detailContent'></u-input> -->
							<view style=" width: 300rpx; text-align: right; color: #C8C8C8;">{{detailContent==''?'请设置':detailContent}}</view>
							<u-icon name="arrow-right" size="14" color="#C8C8C8"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="tip-text">
			信息服务费：{{Number(money).toFixed(2)}}元
		</view>
		<view class="check" v-if="!id">
			<radio :value="radio" :checked="radio" color="#F4858A" borderColor="#F4858A" style="transform: scale(0.75)"
				@click="changeRadio" />
			已阅读并同意 <span class="text" @click="agreement('activity')">《活动发布协议及费用说明》</span>
		</view>
		<view class="bottom">
			<view class="btn" @click="submit">{{id?'提交':`${money*1>0?'提交并缴纳服务费':'提交'}`}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activity: {
					is_sex: 0,
					sex: {},
					is_collection:0,
					is_period: 0,
					price: {},
					issues: 1,
					details: ''
				},
				fileList1: [],
				setSexValue: false,
				setDaiValue: false,
				radio: false,
				eventTime: null,
				showTime: false,
				valueTime: Number(new Date()),
				selectedTime: '',
				numValue: 1,
				showTip: false,
				detailContent: '',
				issueWeek:'',
				id:null,
				days:0,
				activity_price:0,
			};
		},
		computed:{
			money(){
				if(this.eventTime=='week'){
					return this.activity_price*1*this.activity.issues*1||'0.00'
				}else{
					return this.activity_price
				}
			},
		},
		onLoad(e) {
			if(e.id){
				this.id = e.id
				this.rq.getData('User_Activity/detail',{id:this.id}).then(res=>{
					this.activity = res.data
					if(res.data.image){
					let arr	= res.data.image.split(',')
						this.fileList1 = arr.map(i=>{
							return this.rq.imgUrl(i)
						})
					}					
					this.eventTime = res.data.is_period===1?'week':res.data.is_period===0?'time':null
					this.issueWeek = res.data.is_period===0?'':res.data.issue
					this.selectedTime = res.data.is_period===1?'':res.data.issue
					this.detailContent = '已设置'
				})
			}
			let dw = uni.getStorageSync('dw')
			this.rq.getData('User_Activity/service_charge',{city_id:dw.id}).then(res=>{
				this.activity_price = res.data.activity_price?res.data.activity_price:'0.00'
				this.days = res.data.activity_num?res.data.activity_num:7
			})
		},
		methods: {
			receiveDetail(dataArray) {
				this.activity = {
					...this.activity,
					details: dataArray.content,
					pic:dataArray.pic?dataArray.pic.join():''
				};
				this.detailContent = dataArray ? '已设置' : ''
			},
			chooseTime() {
				this.showTime = true
			},
			confirmTime(e) {
				this.showTime = false
				this.selectedTime = this.formatDate(e.value)
			},
			// 新增图片
			chooseImage() {
				let _this = this
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success(res) {
						uni.showLoading({
							mask: true,
							title: '正在上传'
						})
						getApp().uploadFile(res.tempFilePaths, {}, (url) => {
							_this.fileList1 = [..._this.fileList1, ...url]
							uni.hideLoading()
						})
					}
				})
			},
			handleDelete(index) {
				this.fileList1.splice(index, 1)
			},
			setSexChange(e) {
				this.setSexValue = !this.setSexValue
				this.activity.is_sex = e.target.value ? 1 : 0
				if (e.target.value) {
					this.setDaiValue = true
				}
			},
			setDaiChange(e) {
				this.setDaiValue = e.target.value
				this.activity.is_collection = e.target.value ? 1 : 0
			},
			changeRadio() {
				this.radio = !this.radio
			},
			selectTime(item) {
				this.eventTime = item
				this.activity.is_period = item == 'week' ? 1 : 0
			},
			// 提交
			submit() {
				let dw = uni.getStorageSync('dw')
				this.activity.city_id = dw.id
				if (!this.activity.title) {
					uni.showToast({
						title: '请输入活动标题~',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (this.fileList1.length > 0) {
					this.activity.image = this.fileList1.join()
				} else {
					uni.showToast({
						title: '请上传封面图集',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.activity.price.total) {
					if (!this.activity.price.male || !this.activity.price.female) {
						uni.showToast({
							title: '请设置费用~',
							icon: 'none',
							duration: 2000
						});
						return;
					}
				}
				
				if (!this.issueWeek&&!this.selectedTime) {
					uni.showToast({
						title: '请设置活动时间~',
						icon: 'none',
						duration: 2000
					});
					return;
				}else{
					this.activity.issue = this.issueWeek||this.selectedTime
				}
				if(!this.id){
					if (this.radio == false) {
						uni.showToast({
							title: '请阅读并同意协议~',
							icon: 'none',
							duration: 2000
						});
						return;
					}
					this.rq.getData('User_Activity/add',this.activity).then(res=>{
						if(res.code===1){
							let data = res.data
							if(this.money*1>0){
								if(this.activity.is_collection==1){
									uni.navigateTo({
										url: '/subpages/launch/result'
									})
								}else{
									uni.navigateTo({
										url: `/subpages/launch/pay?id=${data.id}&order_no=${data.order_no}`
									})
								}
							}else{
								uni.navigateTo({
									url: '/subpages/launch/result'
								})
							}
						}
					})	
				}else{
					this.rq.getData('Activity/edit',this.activity).then(res=>{
						if(res.code===1){
							uni.showToast({
								title: '修改成功~',
								icon: 'none'
							});
							uni.navigateBack()
						}
					})
				}							
			},
			// 活动详情
			goDetail() {
				setTimeout(() => {
					uni.$emit('detail', {pic:this.activity.pic,content:this.activity.details})
				}, 1000)
				uni.navigateTo({
					url: '/subpages/launch/detail'
				})
			},
			formatDate(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const hour = date.getHours().toString().padStart(2, '0');
				const minute = date.getMinutes().toString().padStart(2, '0');
				return `${year}-${month}-${day} ${hour}:${minute}`;
			},
			openTip() {
				this.showTip = true
			},
			confirmTip() {
				this.showTip = false
			},
			// 协议
			agreement(type){
				uni.navigateTo({
					url:'/subpages/platform/about-platform/about-platform?title=活动发布协议及费用说明&type=' + type
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		margin: 20rpx;
	}

	.pop-bg {
		width: 260px;
		height: 120px;
		border-radius: 8px;
		opacity: 1;
		background: #FFFFFF;
		font-family: PingFang SC;
		padding: 40rpx;
		font-size: 16px;
		font-weight: normal;
		line-height: 15px;
		text-align: center;
		letter-spacing: 0px;
		color: #000000;

		.text {
			margin: 80rpx 0;
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;

			.confirm {
				width: 60%;
				height: 34px;
				border-radius: 102px;
				opacity: 1;

				background: #FF5866;

				border: 1px solid #FF5866;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.tip-text {
		font-size: 12px;
		font-weight: normal;
		line-height: 20px;
		letter-spacing: 0px;
		color: #FF5866;
		margin: 20rpx 60rpx;
	}

	.check {
		font-family: 阿里巴巴普惠体 2.0;
		font-size: 12px;
		font-weight: normal;
		line-height: 20px;
		letter-spacing: 0px;
		margin: 0 30rpx;
		color: #999999;
		display: flex;
		align-items: center;
		// position: fixed;
		// bottom: 140rpx;

		.text {
			color: #333333
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 2;

		.btn {
			font-weight: normal;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			text-align: center;
			line-height: 88rpx;
			margin: 15rpx 64rpx;
			background: #FF5866;
			border-radius: 102px;
			border: 1px solid #FF5866;
		}
	}

	.a1 {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		gap: 25rpx;

		.flex1 {
			border-bottom: 1rpx solid #e9e9e9;
			padding-bottom: 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.flex2 {
			.item1 {
				margin-bottom: 10rpx;
			}
		}

		.flex3 {
			border-bottom: 1rpx solid #e9e9e9;

			.item1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.flex4 {
			.item1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.num-item {
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 13px;
			font-weight: normal;
			line-height: 14px;
			text-align: right;
			letter-spacing: 0px;
			color: #999999;
			margin-top: 25rpx;
			margin-right: 20rpx;
		}

		.qishu-text {
			font-family: 阿里巴巴普惠体 2.0;
			font-weight: 500;
			font-size: 12px;
			color: #313232;

			.input {
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: normal;
				line-height: 18px;
				letter-spacing: 0px;
				font-variation-settings: "opsz" auto;
				color: #000000;
				width: 80rpx;
				text-align: center;
			}

			.minus {
				width: 38rpx;
				height: 38rpx;
				opacity: 1;
				background: #FFFFFF;
				box-sizing: border-box;
				border: 2rpx solid #FF7681;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.plus {
				width: 38rpx;
				height: 38rpx;
				opacity: 1;
				background: #FF7681;
				box-sizing: border-box;
				border: 2rpx solid #FF7681;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.item {
			display: flex;
			align-items: center;
			gap: 20rpx;

			.event-time {
				display: flex;
				align-items: center;
				margin: 20rpx;
				width: 40%;

				.btn-img1 {
					width: 12px;
					height: 12px;
					margin-right: 15rpx;
				}
			}

			.time {
				width: 50%;
				display: flex;
				align-items: center;
			}
		}

		.item3 {
			display: flex;
			align-items: center;
			padding: 20rpx 60rpx;

			image {
				width: 20px;
				height: 20px;
				margin-right: 20rpx;
			}
		}

		.item1 {
			font-size: 14px;
			font-weight: normal;
			line-height: 14px;
			letter-spacing: 0px;
			color: #333333;
			span{
				font-size: 28rpx;
				margin-right: 10rpx;
				color: red;
			}
			.must {
				width: 15rpx;
				height: 15rpx;
				margin-right: 10rpx;
			}

			.tips {
				font-size: 10px;
				font-weight: normal;
				line-height: 22px;
				letter-spacing: 0px;
				color: #FF7681;
				margin-left: 10rpx;
			}

			.i1 {
				display: flex;
				align-items: center;
			}

			.i2 {
				display: flex;
				align-items: center;

				.set-btn {
					margin-right: 20rpx;
				}
			}
		}

		.item2 {
			display: flex;
			align-items: center;
			gap: 20rpx;
			font-family: PingFang SC;
			font-size: 13px;
			font-weight: normal;
			line-height: 14px;
			text-align: right;
			letter-spacing: 0px;
			color: #999999;

			.img-btn {
				width: 152rpx;
				height: 152rpx;
				border-radius: 8px;
				opacity: 1;
				background: #F7F7F7;
				box-sizing: border-box;
				border: 0.5px solid #C4C4C4;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 10px;
				font-weight: normal;
				line-height: 14px;
				letter-spacing: 0px;
				color: #B8B8B8;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.imageItem {
		padding: 15rpx 25rpx;
		display: grid;
		grid-template-columns: auto auto auto;
		gap: 28rpx 28rpx;

		.btn {
			width: 160rpx;
			height: 160rpx;
			border-radius: 8px;
			opacity: 1;
			background: #F7F7F7;
			box-sizing: border-box;
			border: 0.5px solid #C4C4C4;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 10px;
			font-weight: normal;
			line-height: 14px;
			letter-spacing: 0px;

			color: #B8B8B8;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.video-item {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
		position: relative;

		.delete {
			padding: 10rpx;
			position: absolute;
			z-index: 4;
			width: 32rpx;
			height: 32rpx;
			top: -22rpx;
			right: -22rpx;
		}

		.video {
			width: 160rpx;
			height: 160rpx;
		}
	}
</style>